<template>
  <!-- 消耗产出组件 -->
  <div>
    <gongyong @serchClick="serchClick" ref="gongyong" :gongyongOption="gongyongOption">
      <template #top-left>
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker v-model="dateVal" :type="dateType" size="mini" placeholder="选择日期" @change="dateChange" :value-format="valFrom">
          </el-date-picker>

          <span class="date-text" style="margin-left: 15px">日期筛选</span>
          <el-select v-model="dateBin" @change="selectChange" size="mini" :disabled="seltdisab">
            <el-option v-for="item in dateOptions" :key="item.id" :label="item.label" :value="item.value" :disabled="item.disabled">
            </el-option>
          </el-select>
        </div>
      </template>

      <!-- 下边的Table组件 -->
      <template #bottom>
        <deviceTable :dataList="dataList" :devTable="consume" :tableStyle="tableStyle" v-loading="loading" :showSum="showSum">
        </deviceTable>
      </template>
    </gongyong>
  </div>
</template>

<script>
import gongyong from "../layout/gongyong.vue"; // 共用模板
import deviceTable from "@/views/waterAnalysi/components/deviceTable.vue";
import { getConsume, getConsumeDay, getConsumeMonth, getConsumeYear } from "@/api/operationAnalysis/waterAnalysis/waterOperation";

// :devTable="" table表格需要的列表数据
export default {
  components: {
    gongyong,
    deviceTable,
  },

  data () {
    return {
      gongyongOption: {
        top: true,
        center: false,
        bottom: true,
        reset: false,
      },
      tableStyle: {
        TableHight: "650",
      }, // table 表格组件高度
      // 共用组件配置
      showSum: true, // 是否开启table组件的表尾
      dateVal: "2022-03-14", // 时间绑定
      dateBin: 0, // 时间下拉绑定
      suoS: {
        properties:
          "outflow_total,electric_quantity,dose,power_per_ton,drug_per_ton", // 传入需要显示的列
        searchTime: "2022-03-14", //  查询时间
        timeType: 0, // 日期类型
        monitorPointId: "", // 监测点ID
      }, // 查询条件
      dateOptions: [
        {
          value: 0,
          label: "日",
        },
        {
          value: 1,
          label: "月",
        },
        {
          value: 2,
          label: "年",
        },
      ], // 日期下拉绑定

      // 表头配置
      dataList: [
        {
          prop: "displayTime",
          label: "时间",
          id: 0,
        },
        {
          prop: "outflowTotal",
          label: "供水量(m³)",
          id: 1,
        },
        {
          prop: "electricQuantity",
          label: "电耗(KWh)",
          id: 2,
        },
        {
          prop: "dose",
          label: "药耗(Kg)",
          id: 3,
        },
        {
          prop: "powerPerTon",
          label: "吨水电耗(KWh/t)",
          id: 4,
        },
        {
          prop: "drugPerTon",
          label: "吨水药耗(Kg/t)",
          id: 5,
        },
      ],
      consume: [], // 存放消耗列表数据
      loading: true,
      valFrom: "yyyy-MM-dd",
      dateType: "date", // 时间类型
      seltdisab: false,
    };
  },
  watch: {
    dateVal: {
      handler (newVal) {
        if (newVal == null) {
          this.seltdisab = true;
        } else {
          this.seltdisab = false;
        }
      },
      deep: true,
    },
    suoS: {
      handler (newVal) {
        if (newVal) {
          console.log(newVal);
        }
      },
      deep: true,
    },
  },
  created () {
    this.newdata();
  },
  mounted () {
    this.suoS.monitorPointId = this.$parent.$parent.$parent.nodeData
    if (this.suoS.monitorPointId || this.$parent.$parent.$parent.nodeData) {
      this.getConsumeList()
    }
    // if (this.suoS.monitorPointId || this.$parent.$parent.$parent.nodeData.id) {
    //   this.$refs.gongyong.serchClick(); // 调用一次公共组件搜索按钮
    // } else {
    //   setTimeout(() => {
    //     this.$refs.gongyong.serchClick();
    //   }, 1000);
    // }
  },
  methods: {
    // 日期选择
    dateChange (value) {
      // console.log(this.suoS.searchTime);
      this.suoS.searchTime = value;
      console.log(value);
    },

    newdata () {
      //获取当前时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        undefined;
        month = "0" + month;
      }
      if (day < 10) {
        undefined;
        day == "0" + day;
      }
      this.dateVal = year += "-" + month + "-" + day;
      console.log(this.suoS.searchTime);
    },
    // 获取消耗列表数据
    async getConsumeList () {
      if (!this.suoS.monitorPointId) {
        console.log("请选择监测点");
        this.$message.error("请选择监测点");
        this.loading = false;
        return;
      }
      try {
        console.log(this.suoS)
        let res
        if (this.suoS.timeType == 0) {
          debugger
          res = await getConsumeDay(this.suoS);
        } else if (this.suoS.timeType == 1) {
          debugger
          res = await getConsumeMonth(this.suoS);
        } else {
          debugger
          res = await getConsumeYear(this.suoS);
        }
        if (!res.code === 20000) {
          this.loading = false;
          return this.$message.error("查询失败");
        }
        this.$message.success("查询成功");
        this.consume = res.data;
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },
    // 时间选择下拉
    selectChange (label) {
      if (!this.dateVal) {
        return this.$message.error("请输入查询时间");
      }
      console.log(label);
      this.suoS.timeType = label;
      // let str = this.dateVal;
      if (label === 0) {
        this.dateType = "date";
        this.valFrom = "yyyy-MM-dd";
        this.newdata();
        this.suoS.searchTime = this.dateVal;
      } else if (label === 1) {
        this.newdata();

        this.dateType = "month";
        this.valFrom = "yyyy-MM";

        this.suoS.searchTime = this.dateVal.substring(0, 7);
      } else if (label === 2) {
        this.newdata();

        this.dateType = "year";
        this.valFrom = "yyyy";

        this.suoS.searchTime = this.dateVal.substring(0, 4);
      }
    },
    // 点击搜索按钮
    async serchClick () {
      console.log("搜索按钮触发事件");
      if (!this.suoS.searchTime) {
        console.log("请选择查询时间");
        this.$message.error("请选择查询时间");
        return;
      }
      this.getConsumeList();
    },

    // // 点击重置按钮
    // resetClick() {},
  },
};
</script>

<style></style>
